<template>
  <div class="search">
    <el-row :gutter="20" class="btn_group">
      <el-col :span="2"
        ><el-button type="success" plain>植物之最</el-button></el-col
      >
      <el-col :span="2"
        ><el-button type="success" plain>植物一问</el-button></el-col
      >
      <el-col :span="2"
        ><el-button type="success" plain>植物典故</el-button></el-col
      >
      <el-col :span="2"
        ><el-button type="success" plain>植物趣闻</el-button></el-col
      >
      <el-col :span="2"
        ><el-button type="success" plain>植物栽培</el-button></el-col
      >
    </el-row>
    <el-container>
      <el-header>
        <el-input placeholder="请输入关键词"></el-input>
        <el-button>搜索</el-button>
      </el-header>
      <el-container>
        <el-aside width="20%">
          <!-- <el-scrollbar height="100%;"> -->
          <el-menu background-color="rgb(240, 249, 235)">
            <el-scrollbar height="100%;">
              <el-menu-item
                v-for="(item, index) in groupList"
                :key="index"
                @click="chaneGroup(item)"
              >
                <span>{{ item }}</span>
              </el-menu-item>
            </el-scrollbar>
          </el-menu>
          <!-- </el-scrollbar> -->
        </el-aside>
        <el-main>
          <el-scrollbar height="100%;">
            <el-card class="card">
              <!-- <el-scrollbar height="100%;"> -->
              <div v-for="(item, index) in list" :key="item.id">
                <h2 style="margin-left: 32px">
                  {{ index + 1 }}.{{ item.name }}
                </h2>
                <p>&nbsp;&nbsp;&nbsp;{{ item.classification }}</p>
                <p>&nbsp;&nbsp;&nbsp;{{ item.profile }}</p>
                <p>{{ item.skill }}</p>
              </div>
              <!-- </el-scrollbar> -->
            </el-card>
          </el-scrollbar>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import { getGroup } from "@/api/index";
export default {
  name: "Search",
  data () {
    return {
      list: [],
      groupList: ["多肉植物", "栽培花卉"],
      chooseGroup: '多肉植物',
    };
  },
  created () {
    this.getGroup();
  },
  methods: {
    getGroup () {
      getGroup({
        group: this.chooseGroup,
      })
        .then((res) => {
          console.log(res);
          this.list = res;


        })
        .catch(() => {
          this.$message.error('资源获取错误！');
        });
    },
    chaneGroup (i) {
      this.chooseGroup = i;
      this.getGroup();
    }

  },
};
</script>

<style lang="scss" scoped>
.search {
  height: 100%;
  overflow: hidden;
}
.el-container {
  height: 100%;
}
.search .el-header {
  display: flex;
  justify-content: center;
  align-items: center;
}
.el-input {
  width: 30%;
  margin-right: 8px;
}
.el-input >>> .el-input__inner {
  width: 100%;
}
.card {
  height: 85%;
}
.el-card >>> .el-card__body {
  padding: 4px;
  height: 100%;
}
.el-card p {
  white-space: pre-line;
  margin-left: 2em;
}
.el-main {
  // height: calc(100% );
  height: 80%;
}
.el-aside {
  height: 75%;
  overflow: hidden;
  margin-top: 20px;
  border: 1px solid #dedfe0;
  // box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
}
.el-menu-item {
  height: 35px;
  color: rgb(102, 153, 52);
}
</style>